<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap表单(上)</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<style>
    main {
        margin: 1%;
        padding: 10% 20%;
    }
</style>

<body>

    <main>
        <form action="">
            <div class="form-group">
                <label for="username">登录名/用户名</label>
                <input type="text" id="username" name="username" class="form-control">
            </div>
            <div class="form-group">
                <label for="inviteCode">邀请码</label>
                <input type="text" id="inviteCode" name="inviteCode" value="abcd" class="form-control-plaintext">
            </div>
            <div class="form-group row">
                <label for="email" class="col-2">邮箱</label>
                <input type="email" name="email" id="email" class="form-control col-10">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" name="password" id="password" class="form-control">
            </div>
            <div class="form-check">
                <input type="checkbox" name="save-password" id="save-password" class="form-check-input">
                <label for="save-password">记住密码</label>
            </div>
            <div class="form-group">
                <label for="city">第一志愿</label>
                <select name="city" id="city" class="form-control">
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广州">广州</option>
                    <option value="深圳">深圳</option>
                </select>
            </div>
            <div class="form-gourp">
                <label for="info">详细信息</label>
                <textarea name="info" id="info" cols="30" rows="10" class="form-control"></textarea>
            </div>
            <div class="form-group">
                <label for="file">上传资料</label>
                <input type="file" name="file" id="file" class="form-control-file">
            </div>
            <div class="form-group">
                <label for="range">范围</label>
                <input type="range" name="range" id="range" class="form-control-range">
            </div>
            <div class="form-check-inline">
                <input type="checkbox" name="like1" id="like1" class="form-check-input">
                <label for="like1">兴趣1</label>
            </div>
            <div class="form-check-inline">
                <input type="checkbox" name="like2" id="like2" class="form-check-input">
                <label for="like2">兴趣2</label>
            </div>
            <div class="form-check-inline">
                <input type="checkbox" name="like3" id="like3" class="form-check-input">
                <label for="like3">兴趣3</label>
            </div>
            <br>
            <div class="form-check-inline">
                <input type="radio" name="sex" id="man" class="form-check-input">
                <label for="man">男</label>
            </div>
            <div class="form-check-inline">
                <input type="radio" name="sex" id="woman" class="form-check-input">
                <label for="woman">女</label>
            </div>
        </form>
    </main>

    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
</body>

</html>